<template>
  <div class="right-list-container">
    <RightList :list="list" @selected="handleselected"/>
    
  </div>
</template>

<script>
import RightList from './RightList.vue';
export default {
  components:  {
    RightList,
  },
  data() {
    return {
      list: [
        {name:'a',isSelected:false},
        {name:'b',isSelected:false},
        {name:'c',isSelected:true,
          children: [
            {name:'c-1',isSelected:false},
            {name:'c-2',isSelected:true,
            children: [
               {name:'c-2-1',isSelected:true}, 
               {name:'c-2-2',isSelected:true},
              ]
            } 
            ]     
          },
        {name:'d',isSelected:false},
      ]
    }
  },
  methods: {
    handleselected(selectItem) {
      //清除所有元素的选中状态
      const cleanSelected=(items)=>{
        items.forEach(item => {
          item.isSelected = false;
          if(item.children) {
            cleanSelected(item.children);
          }
        });
      };
      cleanSelected(this.list);
      selectItem.isSelected = true;
    },
  }
}
</script>

<style>

</style>